<template>
    <div class="app-container">
        <a-card>
            <BasicTable ref="tableRef" :columns="columns" :selectbox="false" :query="query" @select-change="selectChange">
                <template #button>
                    <a-button type="primary" @click="open(modalRef)">
                        <template #icon>
                            <PlusOutlined />
                        </template>
                        新增
                    </a-button>
                </template>
                <template #table="{ body }">
                    <template v-if="body.column.key === 'isRequired'">
                        {{ body.record.isRequired ? '必须' : '非必须' }}
                    </template>
                    <template v-if="body.column.key === 'action'">
                        <a-button type="link" @click="open(modalRef, body.record)">
                            <template #icon>
                                <EditOutlined />
                            </template>
                            编辑
                        </a-button>
                        <a-popconfirm title="确定要删除吗?" @confirm="del(deleteById, body.record.id, tableRef)">
                            <a-button type="link">
                                <template #icon>
                                    <DeleteOutlined />
                                </template>
                                删除
                            </a-button>
                        </a-popconfirm>
                    </template>
                </template>
            </BasicTable>
        </a-card>
        <Modal ref="modalRef" @close="refresh(tableRef)" />
    </div>
</template>
<script setup name="VersionModule">
import { ref } from 'vue'
import { query, deleteById } from '/@/api/Inverter/Version'
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
import { useBasicTable } from '@iframe/tools/mixins/BasicTableMixins'
import { BasicTable } from '@iframe/tools/components'
import Modal from './Modal.vue'

const { refresh, del, open, selectChange } = useBasicTable()
const tableRef = ref()
const modalRef = ref()
const columns = [
    {
        title: '版本号',
        dataIndex: 'version',
        key: 'version',
        align: 'center',
        width: 150
    },
    {
        title: '必要性',
        dataIndex: 'isRequired',
        key: 'isRequired',
        align: 'center',
        width: 150
    },
    {
        title: '下载地址',
        dataIndex: 'url',
        key: 'url'
    },
    {
        title: '操作',
        key: 'action',
        align: 'center',
        width: 200
    }
]
</script>
